<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="添加">
                <el-select v-model="addValue" placeholder="人员" @change="selectGet">
                    <el-option
                        v-for="item in addUsers"
                        :key="item.username"
                        :label="item.name"
                        :value="item.username">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addUserF">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            v-loading="listLoading"
            style="width: 100%">
            <el-table-column
                label="序号"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="姓名"
                width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>账户: {{ scope.row.username }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.$index!==0"
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">上移
                    </el-button>
                    <el-button
                        v-if="scope.$index<tableData.length-1"
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">下移
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                addValue: '',
                addUser: '',
                listLoading: false,
                tableData: [],
                addUsers: [],
            }
        },

        created() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                this.listLoading = true
                this.$request({
                    url: '/user/getWatchList.do', method: 'post'
                }).then(res => {
                    this.tableData = res.data.list
                    this.addUsers = res.data.users
                    this.listLoading = false
                }).catch((error) => {
                    this.msg = error
                    this.listLoading = false
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            addUserF() {
                this.tableData.push({'id': this.tableData.length, 'name': this.addUser, 'username': this.addValue})
            },
            //下拉框选中事件
            selectGet(vId) {//这个vId也就是value值
                let obj = {};
                obj = this.addUsers.find((item) => {//这里的userList就是上面遍历的数据源
                    return item.username === vId;//筛选出匹配数据
                });
                this.addUser = obj.name;//我这边的name就是对应label的
            }
        }
    }

</script>

<style scoped>

</style>
